<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>物联网协议工具箱</title>
    <link rel="stylesheet" th:href="@{/css/style.css}">
    <link rel="stylesheet" th:href="@{/css/fontawesome.min.css}">
</head>
<body>
    <div class="container">
        <!-- 头部 -->
        <div class="header">
            <h1><i class="fas fa-toolbox"></i> 物联网协议工具箱</h1>
            <p>在线数据转换与校验码计算工具</p>
        </div>

        <div class="main-content">
            <!-- 原始数据区域 -->
            <div class="data-section">
                <div class="section-header">
                    <span class="section-title">
                        <i class="fas fa-file-import"></i> 原始数据
                    </span>
                    <span class="char-count" id="inputCharCount">总字符数: 0</span>
                </div>
                <div class="textarea-wrapper">
                    <textarea id="inputData" class="data-textarea" 
                              placeholder="请输入要处理的数据..."></textarea>
                </div>
            </div>

            <!-- 工具栏 -->
            <div class="toolbar">
                <button class="toolbar-button" onclick="clearInput()">
                    <i class="fas fa-eraser"></i> 清空输入
                </button>
                <button class="toolbar-button" onclick="clearOutput()">
                    <i class="fas fa-trash"></i> 清空输出
                </button>
                <button class="toolbar-button" onclick="copyOutput()">
                    <i class="fas fa-copy"></i> 复制结果
                </button>
                <button class="toolbar-button" onclick="swapData()">
                    <i class="fas fa-exchange-alt"></i> 交换数据
                </button>
            </div>

            <!-- 操作按钮区域 -->
            <div class="operations-section">
                <h3 class="operations-title">
                    <i class="fas fa-cogs"></i> 操作类型
                </h3>
                
                <div class="operation-groups">
                    <!-- 数据转换组 -->
                    <div class="operation-group">
                        <div class="group-title">
                            <i class="fas fa-exchange-alt"></i> 数据转换
                        </div>
                        <div class="button-grid">
                            <button class="operation-button" onclick="performOperation('hexToAscii')">
                                HexTo ASCII
                            </button>
                            <button class="operation-button" onclick="performOperation('asciiToHex')">
                                ASCII ToHex
                            </button>
                            <button class="operation-button" onclick="performOperation('hexToBinary')">
                                16进制转2进制
                            </button>
                            <button class="operation-button" onclick="performOperation('binaryToHex')">
                                2进制转16进制
                            </button>
                        </div>
                    </div>

                    <!-- Base64编码组 -->
                    <div class="operation-group">
                        <div class="group-title">
                            <i class="fas fa-code"></i> Base64编码
                        </div>
                        <div class="button-grid">
                            <button class="operation-button success" onclick="performOperation('encodeBase64')">
                                Base64编码
                            </button>
                            <button class="operation-button success" onclick="performOperation('decodeBase64')">
                                Base64解码
                            </button>
                        </div>
                    </div>

                    <!-- 时间戳转换组 -->
                    <div class="operation-group">
                        <div class="group-title">
                            <i class="fas fa-clock"></i> 时间戳转换
                        </div>
                        <div class="button-grid">
                            <button class="operation-button primary" onclick="performOperation('getCurrentTimestamp')">
                                获取当前时间戳
                            </button>
                            <button class="operation-button primary" onclick="performOperation('timestampToDateTime')">
                                时间戳转日期
                            </button>
                            <button class="operation-button primary" onclick="showDateTimeModal()">
                                日期转时间戳
                            </button>
                        </div>
                    </div>

                    <!-- 字符串操作组 -->
                    <div class="operation-group">
                        <div class="group-title">
                            <i class="fas fa-font"></i> 字符串操作
                        </div>
                        <div class="button-grid">
                            <button class="operation-button" onclick="performOperation('toUpperCase')">
                                全部大写
                            </button>
                            <button class="operation-button" onclick="performOperation('toLowerCase')">
                                全部小写
                            </button>
                            <button class="operation-button" onclick="performOperation('reverse')">
                                16进制反转
                            </button>
                            <button class="operation-button" onclick="performOperation('addSpaces')">
                                16进制加空格
                            </button>
                            <button class="operation-button" onclick="performOperation('removeSpaces')">
                                去空格
                            </button>
                        </div>
                    </div>

                    <!-- 协议转换组 -->
                    <div class="operation-group">
                        <div class="group-title">
                            <i class="fas fa-sync"></i> 协议转换
                        </div>
                        <div class="button-grid">
                            <button class="operation-button success" onclick="performOperation('add33')">
                                加33反转
                            </button>
                            <button class="operation-button success" onclick="performOperation('subtract33')">
                                减33反转
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 目标数据区域 -->
            <div class="data-section">
                <div class="section-header">
                    <span class="section-title">
                        <i class="fas fa-file-export"></i> 目标数据
                    </span>
                    <span class="char-count" id="outputCharCount">总字符数: 0</span>
                </div>
                <div class="textarea-wrapper">
                    <textarea id="outputData" class="data-textarea" 
                              placeholder="处理结果将显示在这里..." readonly></textarea>
                </div>
            </div>
        </div>
    </div>

    <!-- 参数输入模态框 -->
    <div id="paramModal" class="modal">
        <div class="modal-content">
            <h3 class="modal-header" id="modalTitle">参数输入</h3>
            <div class="modal-body" id="modalBody">
                <!-- 动态内容 -->
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" onclick="closeModal()">取消</button>
                <button class="btn btn-primary" id="modalConfirmBtn">确定</button>
            </div>
        </div>
    </div>

    <!-- 提示信息 -->
    <div id="toast" class="toast"></div>

    <script th:src="@{/js/app.js}"></script>
</body>
</html>
